<style>
    .dhh-phone-slide-tab {
        height: 789px;
        margin-top: 10px;
        float: left;
        width: 100%;
    }
    
    .click-opraty {
        font-size: 20px;
        cursor: pointer;
        margin: 5px;
    }
    
    .input-box {
        height: 30px;
        float: left;
        width: 100%;
        margin-top: 30px;
        margin-left: 30px;
    }
    
    .input-line-1 {
        height: 30px;
        display: inline-block;
        float: left;
        margin-bottom: 5px;
        width: 60%;
    }
    
    .input-line-1 label {
        height: 30px;
        width: 30%;
        float: left;
        line-height: 30px;
        -text-indent: 10px;
        text-align: right;
        padding-right: 2%;
    }
    
    .input-line-1 input,
    .input-line-1 select {
        height: 30px;
        width: 60%;
        float: left;
        border: solid 1px lightgray;
        text-indent: 15px;
    }
</style>
<div id="dhh-phone-slide" class="show_page_content">
    <!-- 顶部按钮 -->
    <div class="top_btn">
        <div class="layui-btn input-line" id="block-url-bind-add"><i class="layui-icon layui-icon-add-circle-fine"></i>添加</div>
    </div>
    <div class="dhh-phone-slide-tab">
        <table id="dhh-phone-slide-table" lay-filter="order"></table>
    </div>
</div>
<div id="phone-slide" style="display:none;">
    <div class="input-box">
        <div class="input-line-1">
            <label for=" ">幻灯片名称：</label>
            <input type="text " placeholder="请输入名称" class="app_num name" field="title" rexg="" msg="" rexIndex="0">
        </div>
        <span id=""></span>
    </div>
    <div class="input-box">
        <div class="input-line-1">
            <label for=" ">幻灯链接:</label>
            <input type="text" placeholder="请输入链接" class="app_num link" field="link" rexg="^(?=^.{3,255}$)(http(s)?:\/\/)?(www\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\d+)*(\/\w+\.\w+)*$" msg="格式不正确" rexIndex="1">
        </div>
        <span id=""></span>
    </div>
    <div class="input-box">
        <div class="input-line-1">
            <label for=" ">背景颜色：</label>
            <input type="color" placeholder="请输入颜色" class="app_num bgcolor" field="color" rexg="" msg="格式不正确" rexIndex="2">
        </div>
        <span id=""></span>
    </div>
    <div class="input-box">
        <div class="input-line-1">
            <label for=" ">上传图片：</label>
            <input type="input" placeholder="请输入选择图片" class="app_num checkImg" field="img" readonly>
            <input type="file" class="fileLog" field="img" style="display: none;">

        </div>
        <span id=""></span>
    </div>
    <img src="" class="checkImgShow" style="width: 80%;height: auto;margin-left: 10%;margin-bottom: 30px;margin-top: 20px;">
</div>
<script>
    layui.use(["table"], function() {
        var laytab = layui.table;
        //laydate 时间控件
        var heigth = $("#page-container").height() - 80;

        var fdata = new FormData();
        $(".dhh-phone-slide-tab").height(heigth);
        //搜索
        $("#block-url-bind-search").on("click", function() {
            laytab.reload('usertable');
        });

        renderTable();
        $("#block-url-bind-add").on("click", function() {
            showWindow();
        });
        $("#dhh-phone-slide").on("click", ".edit", function() {
            showWindow(JSON.parse($(this).attr("dt")));
        })
        delRow("#dhh-phone-slide .del", "/settings/app_banner_del", function() {
            laytab.reload('usertable');
        });

        function showWindow(data) {
            var dat = "";
            var urls = "";
            var status = "";
            if (data != undefined) {
                status = 0;
                dat = data;
                urls = "/settings/banner_info_edit"
            } else {
                urls = "/settings/app_banner_add";
                status = 1;

            }
            var istrue = true;
            var isFlie = false;

            var index = layer.open({
                type: 1,
                shade: 0.6,
                title: (status == 0 ? "修改" : "添加") + "幻灯片",
                area: [$(document).width() * 0.4 + "px", $(document).height() * 0.7 + "px"],
                btn: [(status == 0 ? "修改" : "添加")],
                id: "user-change",
                content: $("#phone-slide").html(),
                yes: function() {
                    if (istrue && isFlie) {
                        fdata.append("title", $("#user-change .name").val());
                        fdata.append("link", $("#user-change .link").val());
                        fdata.append("color", $("#user-change .bgcolor").val());
                        if (status == 0) {
                            fdata.append("id", dat.id);
                            if ($("#user-change .fileLog")[0].files[0] != undefined) {
                                fdata.append("img", $("#user-change .fileLog")[0].files[0]);
                            }
                        }
                        if (status == 1) {
                            fdata.append("img", $("#user-change .fileLog")[0].files[0]);
                        }

                        $.ajax({
                            url: urls,
                            type: "post",
                            data: fdata,
                            dataType: "json",

                            processData: false,
                            contentType: false,
                            beforeSend: function() {
                                loadIndex = layer.load(0);
                            },
                            success: function(d) {
                                layer.close(loadIndex);
                                layer.close(index);
                                if (d.result == "1") {
                                    layer.msg((status == 0 ? "修改" : "添加") + "成功！", {
                                        icon: 1,
                                        time: 2000
                                    });

                                    laytab.reload('usertable');
                                } else {
                                    layer.msg((status == 0 ? "修改" : "添加") + "失败！", {
                                        icon: 2,
                                        time: 2000
                                    });
                                }
                            },
                            error: function() {
                                layer.close(loadIndex);
                                layer.close(index);
                                layer.msg("网络异常！", {
                                    icon: 2,
                                    time: 2000
                                });
                            }
                        });
                    } else if (!isFlie) {
                        layer.msg("请选择图片！");
                    }
                },
                success: function() {
                    if (status == 0) {
                        for (var i = 0; i < $("#user-change .app_num").length; i++) {
                            $("#user-change .app_num").eq(i).val(dat[$(".app_num").eq(i).attr("field")]);
                        }
                        if ($("#user-change .checkImg").val() != "") {
                            isFlie = true;
                            $("#user-change .checkImgShow").attr("src", dat["img"]);
                        }
                    }

                    var URL = window.URL || window.webkitURL;
                    $("#user-change .checkImg").on("click", function() {
                        $("#user-change .fileLog").click();
                    });
                    $("#user-change .fileLog").on("change", function() {
                        isFlie = true;

                        var videoUrl = URL.createObjectURL(this.files[0]);
                        $("#user-change .checkImg").val(videoUrl);
                        $("#user-change .checkImgShow").attr("src", videoUrl);
                    });
                    $("#user-change .link").on("blur", function() {
                        if (new RegExp($(this).attr("rexg")).test($(this).val()) || $(this).val() == "") {
                            istrue = true;
                            $(this).parent().next().html("");
                            $(this).css("border", "solid 1px lightgray");
                        } else {
                            $(this).parent().next().html("<span style='color:indianred'>" + $(this).attr("msg") + "</span>");
                            $(this).css("border", "solid 1px indianred");
                            istrue = false;
                        }
                    });
                    $("#user-change .link").on("focus", function() {
                        $(this).parent().next().html("");
                        $(this).css("border", "solid 1px lightgray");
                    });
                }
            });
        }

        function renderTable() {
            laytab.render({
                elem: '#dhh-phone-slide-table',
                height: heigth,
                url: "/settings/app_banner_conf_list",
                method: "get",
                id: "usertable",
                response: {
                    statusName: "result",
                    msgName: 'tips' //规定状态信息的字段名称，默认：msg
                        ,
                    countName: 'total' //规定数据总数的字段名称，默认：count
                        ,
                    dataName: 'rows',
                    statusCode: 1 //规定成功的状态码，默认：0
                },
                request: {
                    pageName: 'page' //页码的参数名称，默认：page
                        ,
                    limitName: 'lines' //每页数据量的参数名，默认：limit
                },
                done: function(d) {
                    $(".layui-none").text(d.tips);
                },
                parseData: function(res) { //res 即为原始返回的数据
                    return {
                        "result": res.result, //解析接口状态
                        "tips": res.tips, //解析提示文本
                        "total": res.total, //解析数据长度
                        "rows": res.rows //解析数据列表
                    }
                },
                cols: [
                    [{
                        title: "ID",
                        field: "id",
                        unresize: true,
                    }, {
                        title: "幻灯片图片",
                        field: "img",
                        width: "30%",
                        height: 80,
                        templet: function(d) {
                            return "<img src='" + d.img + "' sty='width:60px;width:120px;margin:5px;'>"
                        }
                    }, {
                        title: "操作",
                        unresize: true,
                        width: "10%",
                        templet: function(d) {
                            return "<a class='click-opraty'><i class='layui-icon layui-icon-edit edit' dt='" + JSON.stringify(d) + "' style='color:#393D49;'></i></a>" +
                                "<a class='click-opraty'><i class='layui-icon layui-icon-delete del' uid='" + d.id + "' style='color:#393D49;'></i></a>";
                        }
                    }]
                ],
                page: true,
                limits: [20, 50, 100],
                limit: 20,
                loading: true,
                skin: {
                    even: true
                },
            });
        }










    });
</script>